<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted } from 'vue'

import GuideQuizMask from './guide-quiz-mask/index.vue'

import { imagePath } from '@/libs/file-utils'
import { friendInfo, result, fortuneReport, isCreating, update, clear, createPoster } from './data'
import { userInfo } from '@/libs/user'
import { back } from '@/libs/common'
import { menuButtonRect, safeArea } from '@/libs/config'

const props = defineProps<{
  type: string
  friendId: string
}>()

const img_bg_11 = imagePath('community/friend/info/bg-11.jpg')
const img_bg_12 = imagePath('community/friend/info/bg-12.jpg')
const logo_11 = imagePath('community/friend/info/logo-11.png')
const logo_12 = imagePath('community/friend/info/logo-12.png')
const logo_small_11 = imagePath('community/friend/info/logo-small-11.png')
const logo_small_12 = imagePath('community/friend/info/logo-small-12.png')
const icon_link_11 = imagePath('community/friend/info/icon-link-11.png')
const icon_link_12 = imagePath('community/friend/info/icon-link-12.png')
const btn_poster_11 = imagePath('community/friend/info/btn-poster-11.png')
const btn_poster_12 = imagePath('community/friend/info/btn-poster-12.png')
const icon_loading = imagePath('community/friend/info/icon-loading.png')
const icon_switch = imagePath('community/friend/detail/icon-switch.svg')

const is12 = props.type == '12'

/**
 * 查看合盘报告好友信息
 */
// const toDetail = () => uni.navigateTo({ url: '/pages/community/friend/report/detail' })

/**
 * 查看合盘报告好友信息
 */
const toList = () => back('/pages/community/friend/list/index')

onMounted(() => update(Number(props.type), Number(props.friendId)))
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="community-friend-report-info"
    :pageStyle="{
      backgroundImage: is12 ? img_bg_12 : img_bg_11,
      color: is12 ? '#fff' : '#531C1A'
    }"
    :contentStyle="{
      paddingTop: Math.max(safeArea.top, menuButtonRect.bottom) + 'rpx',
    }"
    :showTopBar="false"
  >
    <div
      class="top"
      :class="{ black: is12 }"
    >
      <div class="inner">
        <div
          class="switchor"
          @click="toList"
        >
          <div
            class="icon"
            :style="{ backgroundImage: icon_switch }"
          ></div>
          切换
        </div>

        <div class="item">
          <div class="name">{{ userInfo?.nickname }}</div>
          <div class="info">{{ userInfo?.birthday }}</div>
          <div class="info">{{ userInfo?.mbtiType }} {{ userInfo?.zodiacSign }}</div>
        </div>
        <div
          class="link"
          :style="{ backgroundImage: is12 ? icon_link_12 : icon_link_11 }"
        ></div>
        <div class="item">
          <div class="name">{{ friendInfo?.nickname }}</div>
          <div class="info">{{ friendInfo?.birthday }}</div>
          <div class="info">{{ friendInfo?.mbtiType }} {{ friendInfo?.zodiacSign }}</div>
        </div>

        <div class="extra">
          <div class="score"><span class="val">{{ result?.score || '??' }}</span>分</div>
          <div class="relation">关系：{{ friendInfo?.groupName }}</div>
        </div>
      </div>
    </div>

    <div
      v-if="isCreating"
      class="report"
      :class="{ black: is12 }"
    >
      <div
        class="logo"
        :style="{ backgroundImage: is12 ? logo_12 : logo_11 }"
      ></div>

      <div class="title">蒜盘解读</div>

      <div class="creating">
        <div
          class="icon"
          :style="{ backgroundImage: icon_loading }"
        ></div>

        {{ '运蒜中，请稍后\n报告生成时间预计2分钟~' }}
      </div>
    </div>
    <template v-else-if="fortuneReport">
      <div
        class="btn-poster"
        :style="{ backgroundImage: is12 ? btn_poster_12 : btn_poster_11 }"
        @click="createPoster(type)"
      ></div>

      <div
        class="box"
        :class="{ black: is12 }"
      >
        <div class="title">【灵犀合盘】-- 我们的命运交响曲</div>
        <div>卷首语</div>
        {{ fortuneReport.beginning }}

        <div
          class="logo"
          :style="{ backgroundImage: is12 ? logo_small_12 : logo_small_11 }"
        ></div>
      </div>

      <div
        class="stage-title"
        :class="{ black: is12 }"
      >第一章：灵魄底色·双星本质探秘</div>
      <div
        v-for="(item, idx) in fortuneReport.firstChapter"
        :key="idx"
        class="box"
        :class="{ black: is12 }"
      >
        <div class="title">{{ item.title }}</div>
        {{ item.description }}

        <div
          v-if="item.value"
          v-for="(sub, idx ) in item.value"
          :key="idx"
        >
          <div class="sub-title">{{ sub.title }}</div>
          <div>{{ sub.description }}</div>
        </div>
      </div>

      <div
        class="stage-title"
        :class="{ black: is12 }"
      >第二篇章：命运交织 · 我们的灵魂契约</div>
      <div
        v-for="(item, idx) in fortuneReport.secondChapter"
        :key="idx"
        class="box"
        :class="{ black: is12 }"
      >
        <div class="title">{{ item.title }}</div>
        {{ item.description }}

        <div
          v-if="item.value"
          v-for="(sub, idx ) in item.value"
          :key="idx"
        >
          <div class="sub-title">{{ sub.title }}</div>
          <div>{{ sub.description }}</div>
        </div>
      </div>

      <div
        class="stage-title"
        :class="{ black: is12 }"
      >第三篇章：共创奇迹 · 我们的改运魔法书</div>
      <div
        v-for="(item, idx) in fortuneReport.thirdChapter"
        :key="idx"
        class="box"
        :class="{ black: is12 }"
      >
        <div class="title">{{ item.title }}</div>
        {{ item.description }}

        <div
          v-if="item.value"
          v-for="(sub, idx ) in item.value"
          :key="idx"
        >
          <div class="sub-title">{{ sub.title }}</div>
          <div>{{ sub.description }}</div>
        </div>
      </div>

      <div
        class="stage-title"
        :class="{ black: is12 }"
      >第四篇章：生命剧场 · 我们的关系演绎场</div>
      <div
        v-for="(item, idx) in fortuneReport.fourthChapter"
        :key="idx"
        class="box"
        :class="{ black: is12 }"
      >
        <div class="title">{{ item.title }}</div>
        {{ item.description }}

        <div
          v-if="item.value"
          v-for="(sub, idx ) in item.value"
          :key="idx"
        >
          <div class="sub-title">{{ sub.title }}</div>
          <div>{{ sub.description }}</div>
        </div>
      </div>

      <div
        v-if="is12"
        class="stage-title"
        :class="{ black: is12 }"
      >最终章：星途预言 · 我们的共同进化之路</div>
      <div
        v-if="fortuneReport.finalChapter"
        v-for="(item, idx) in fortuneReport.finalChapter"
        :key="idx"
        class="box"
        :class="{ black: is12 }"
      >
        <div class="title">{{ item.title }}</div>
        {{ item.description }}

        <div
          v-if="item.value"
          v-for="(sub, idx ) in item.value"
          :key="idx"
        >
          <div class="sub-title">{{ sub.title }}</div>
          <div>{{ sub.description }}</div>
        </div>
      </div>

      <div
        class="box"
        :class="{ black: is12 }"
      >
        <div class="title">结语</div>
        {{ is12 ? (result?.mbtiReport?.ending) : (result?.baziReport?.ending) }}
      </div>

      <div class="blank"></div>
    </template>

    <GuideQuizMask />
  </PageWrapper>
</template>

<style lang="less" scoped>
.top {
  width: 686rpx;
  height: 266rpx;

  margin: 32rpx auto 0;

  border-radius: 32rpx;
  box-shadow: 0 4rpx 8rpx 0 #fff, 0 2rpx 10rpx 0 #CE3A01 inset;

  display: flex;
  justify-content: center;
  align-items: center;

  .inner {
    position: relative;
    width: 646rpx;
    height: 226rpx;

    box-sizing: border-box;
    padding-top: 74rpx;
    padding-left: 32rpx;

    border-radius: 32rpx;
    background-color: #ffcc244f;
    box-shadow: 0 0 10rpx 2rpx rgba(243, 67, 0, .6);

    display: flex;
    justify-content: center;

    .switchor {
      position: absolute;
      top: 14rpx;
      right: 8rpx;

      padding: 2rpx 10rpx;

      border-radius: 38rpx;
      border: 2rpx solid #fff;

      display: flex;
      align-items: center;

      color: #fff;
      font-size: 28rpx;

      .icon {
        width: 32rpx;
        height: 32rpx;

        margin-right: 6rpx;
      }
    }

    .item {
      // width: 160rpx;

      text-align: center;

      .name {
        color: #531C1A;
        font-size: 48rpx;
        line-height: 32rpx;
      }

      .info {
        margin-top: 14rpx;

        color: #531C1A;
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }

    .link {
      width: 80rpx;
      height: 80rpx;

      margin: 22rpx 10rpx 0;
    }

    .extra {
      margin-left: 20rpx;

      text-align: center;

      .score {
        margin-left: 10rpx;

        color: #fff;
        font-size: 64rpx;
        line-height: 64rpx;
        text-shadow: 0 6rpx 8rpx rgba(#000, .25);

        .val {
          margin-right: 20rpx;

          font-size: 96rpx;
        }
      }

      .relation {
        margin-top: 16rpx;

        color: #fff;
        font-size: 32rpx;
        text-shadow: 0 6rpx 8rpx rgba(#000, .25);
      }
    }
  }


  &.black {
    background-color: rgba(66, 78, 255, .04);
    box-shadow: inset 0 2rpx 9rpx 0 #C8E0FF, 0 4rpx 8rpx 0 #fff;

    .inner {
      background-color: rgba(#000, .6);
      box-shadow: 0 0 10rpx 2rpx rgba(200, 224, 255, .6);

      .item {

        .name,
        .info {
          color: #fff;
        }
      }

      .link {
        width: 100rpx;
        height: 100rpx;
      }

      .extra {

        .score,
        .relation {
          color: #FFCD60;
        }
      }
    }
  }
}

.report {
  position: relative;
  width: 684rpx;
  height: 360rpx;

  margin: 100rpx auto 0;

  box-sizing: border-box;
  padding: 48rpx;

  border-radius: 32rpx;
  background-color: #8d8b7c;
  box-shadow: 0 0 25rpx 2rpx rgba(243, 67, 0, .42);

  .logo {
    position: absolute;
    top: -110rpx;
    right: 0;

    width: 190rpx;
    height: 220rpx;
  }

  .creating {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    color: rgba(#fff, .87);
    font-size: 28rpx;
    line-height: 40rpx;
    letter-spacing: 2rpx;
    text-align: center;

    .icon {
      width: 48rpx;
      height: 48rpx;

      margin-bottom: 10rpx;

      @keyframes rot {
        0% {
          transform: rotateZ(0deg);
        }

        100% {
          transform: rotateZ(360deg);
        }
      }

      animation: rot 1s linear infinite;
    }
  }

  .title {
    color: #531C1A;
    font-size: 48rpx;
    line-height: 32rpx;
  }

  &.black {
    background-color: rgba(#000, .6);
    box-shadow: 0rpx 0rpx 25rpx 2rpx rgba(200, 224, 255, .42);

    .title {
      color: #fff;
    }
  }
}

.btn-poster {
  width: 292rpx;
  height: 80rpx;

  margin: 12rpx 30rpx;
}

.box {
  position: relative;
  width: 684rpx;

  margin: 16rpx auto 0;

  box-sizing: border-box;
  padding: 24rpx 30rpx;

  background-color: #FFFCE1;
  box-shadow: 0 0 25rpx 2rpx rgba(243, 67, 0, .42);
  border-radius: 32rpx;

  color: rgba(65, 34, 0, .72);
  font-size: 28rpx;
  line-height: 32rpx;

  .title {
    margin-bottom: 24rpx;

    color: #531C1A;
    font-size: 32rpx;
    line-height: 32rpx;
  }

  .sub-title {
    margin: 10rpx 0 4rpx;

    font-weight: bold;
  }

  .logo {
    position: absolute;
    top: -50rpx;
    right: -14rpx;

    width: 170rpx;
    height: 148rpx;
  }

  &.black {
    background-color: rgba(#000, .6);
    box-shadow: 0rpx 0rpx 25rpx 2rpx rgba(200, 224, 255, .42);

    color: rgba(#fff, .7);

    .title {
      color: #fff;
    }

    .sub-title {
      color: rgba(#fff, .85);
    }

    .logo {
      width: 144rpx;
      height: 166rpx;
    }
  }
}

.stage-title {
  margin: 24rpx 34rpx;

  color: #531C1A;

  &.black {
    color: #fff;
  }
}

.blank {
  height: 100rpx;
}
</style>